import React, { useState } from 'react';
import { Table, InputNumber, Button, Card, Input, message, Checkbox } from 'antd';
import { CheckOutlined, SettingOutlined } from '@ant-design/icons';
import "./index.scss";
function Sensor() {
  const [sensors, setSensors] = useState([
    { key: 'A1', address: 'A1', threshold: 1, selected: true },
    { key: 'A2', address: 'A2', threshold: 2, selected: false },
    { key: 'A3', address: 'A3', threshold: 3, selected: false },
    { key: 'B1', address: 'B1', threshold: 4, selected: false },
    { key: 'B2', address: 'B2', threshold: 5, selected: false },
  ]);
  const columns = [
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      width: 100,
      align: 'left',
    },
    {
      title: '阈值',
      dataIndex: 'threshold',
      key: 'threshold',
      align: 'left',
      render: (value, record) => (
        <InputNumber
          value={value}
          onChange={(newValue) => {
            const newSensors = sensors.map(sensor => {
              if (sensor.key === record.key) {
                return { ...sensor, threshold: newValue };
              }
              return sensor;
            });
            setSensors(newSensors);
          }}
          min={0}
          max={999999}
        />
      ),
    },
    {
      title: '',
      dataIndex: 'selected',
      key: 'selected',
      align: 'left',
      render: (value, record) => (
        <Checkbox checked={value} onChange={(e) => {
          console.log(e);
          const newSensors = sensors.map(sensor => {
            if (sensor.key === record.key) {
              return { ...sensor, selected: e.target.checked };
            }
            return sensor;
          });
          setSensors(newSensors);
        }} />
      ),
    }
  ];
  const [value, setValue] = useState();
  const [location, setLocation] = useState();
  function submit() {
    console.log('提交');
    console.log(sensors);
    console.log(value)
  }
  function flicker() {
    console.log('闪烁');
    console.log(location);
  }
  function reset() {
    console.log('重置');
  }
  function calibration() {
    console.log('标定');
  }

  return (
    <div className="sensor-container">
      <div className="row-a1">
        <div className="con-a1">
          <Card title={
            <div className='title'>
              <SettingOutlined style={{ color: '#08c' }} />
              <span className="tit">传感器阈值</span>
            </div>
          }>
            <Table
              columns={columns}
              dataSource={sensors}
              pagination={false}
            />
            <div className="submit">
              <InputNumber
                value={value}
                onChange={(newValue) => setValue(newValue)}
                min={0}
                max={999999}
              />
              <div className="btn" onClick={submit}>
                应用到所选
              </div>
            </div>
          </Card>
        </div>
        <div className="con-a2">
          <Card title={
            <div className='title'>
              <SettingOutlined style={{ color: '#08c' }} />
              <span className="tit">库位测试</span>
            </div>
          }>
            <div className="tit">
              库位
            </div>
            <div className="input">
              <Input value={location} onChange={(e) => {
                setLocation(e.target.value);
              }} />
            </div>
            <div className="btns">
              <div className="btn" onClick={flicker}>
                闪烁
              </div>
              <div className="btn" onClick={reset}>
                重置
              </div>
              <div className="btn" onClick={calibration}>
                标定
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}

export default Sensor;